<template>
	<view class="main">
		<van-toast id="van-toast" />
		<view class="foothand" @click="gzbtn" v-show="wechatLogo">
			点击关注公众号，接收充电消息通知
		</view>
		<view class="hand">
			<view class="handnei">
				<view class="hleft" @click="toPersonalData">
					<image :src="userlist.weImage"></image>
				</view>
				<view class="hright">
					<view>
						用户编号：{{userlist.id}}
					</view>
					<view v-if="userlist.weName">
						微信昵称：{{userlist.weName}}
					</view>
					<view v-if="userlist.phone">
						手机号：{{userlist.phone}}
					</view>
					<view>
						小区位置：<span v-if="userlist.projectName">{{userlist.projectName}}</span>
						<span v-else>暂未绑定</span>
					</view>
					<view>
						充电包月截止：<span v-if="userlist.endTime">{{userlist.endTime}}</span>
						<span v-else>无</span>
					</view>
					<view
						v-show="userlist.monthlyType=='A1'||userlist.monthlyType=='A3'||userlist.monthlyType=='A4'||userlist.monthlyType=='A6'">
						本月剩余：<span
							v-if="userlist.monthlyType=='A1'||userlist.monthlyType=='A4'">{{userlist.num}}小时</span>
						<span
							v-else-if="userlist.monthlyType=='A3'||userlist.monthlyType=='A6'">{{userlist.num}}次</span>
						<span v-else>0</span>
					</view>
					<view v-show="userlist.monthlyType=='A5'||userlist.monthlyType=='A7'">
						当天剩余：<span v-if="userlist.monthlyType=='A5'">{{userlist.num}}小时</span>
						<span v-else-if="userlist.monthlyType=='A7'">{{userlist.num}}次</span>
						<span v-else>0</span>
					</view>

				</view>
			</view>
			<view class="hshow">
				<view class="hsleft">
					<view class="hsone" v-show="userlist.realBalance">{{userlist.realBalance}}</view>
					<view class="hsone" v-show="!userlist.realBalance">0.00</view>
					<view class="hstwo">账户余额</view>
				</view>
				<view class="hsleft">
					<view class="hsone hsleftk" v-show="userlist.dummyBalance">{{userlist.dummyBalance}}</view>
					<view class="hsone hsleftk" v-show="!userlist.dummyBalance">0.00</view>
					<view class="hstwo hsleftk">赠送余额</view>
				</view>
			</view>
		</view>
		<view class="show">

			<view class="lun">
				<an-notice-bar :text="noticeMsg" color="#fff" bgColor="#4A4E52"></an-notice-bar>
			</view>
			<a :href="'tel:'+projectPhone" v-show="projectPhone">
				<view class="kf">
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//h4.png"></image>
					<view>专属客服：{{projectPhone}}</view>
				</view>
			</a>
			<view class="kf" v-show="!projectPhone">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//h4.png"></image>
				<view>快去扫描设备二维码绑定小区获取您的专属客服吧</view>
			</view>
			<view class="mont">
				
				<navigator url="../trouble_shooting/trouble_shooting" hover-class="none">
					<view class="mone">
						<view class="moneleft">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//2.png"></image>
							故障报修
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</navigator>
				<navigator url="../remote_charging/remote_charging" hover-class="none">
					<view class="mone">
						<view class="moneleft">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//3.png"></image>
							远程充电
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</navigator>
				<navigator url="../contact_kf/contact_kf?backid=0" hover-class="none">
					<view class="mone">
						<view class="moneleft">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//4.png"></image>
							合作加盟
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</navigator>
				<navigator url="../using_help/using_help" hover-class="none">
					<view class="mone">
						<view class="moneleft">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//5.png"></image>
							使用帮助
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</navigator>
				<navigator url="../appointment_installation/appointment_installation" hover-class="none">
					<view class="mone">
						<view class="moneleft">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//6.png"></image>
							站点报装
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</navigator>
				<navigator url="../more/more" hover-class="none">
					<view class="mone">
						<view class="moneleft">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//7.png"></image>
							查看更多
						</view>
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//jtright.png"></image>
					</view>
				</navigator>

			</view>
			
			<view class="tap" v-if="poster_list.length > 0">
				<view class="ddtap" v-for="item in poster_list" :key="item.id" @click="tiaozhuan(item.url)">
					<image :src="item.img" v-if="item.typeId == 1"></image>
				
					<video :src="item.img" v-else></video>
				</view>
			</view>
			
			<van-popup :show="tipbindshow">
				<view class="tishi">
					<view class="tstou">提示</view>
					<view class="tsnei">
						请先扫设备二维码绑定小区后再操作。
					</view>
					<view class="kbtn" @click="toSmcharging">
						确认
					</view>
				</view>
			</van-popup>
			
		</view>
		<tabBar tab01="3"></tabBar>
		<view class="footdibu" v-show="typeone">
			<view class="fdbone"></view>
			<view class="fdbfive">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n8.png"></image>
			</view>
			<view class="fdbtwo">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n1.png"></image>
			</view>
			<view class="fdbthree">
				<view class="fdbthreeshang">账户充值</view>
				<view class="fdbthreezhong">
					若提示“请先扫描设备二维码绑定小区后再充值”请您在充值使用前，使用微信扫描本小区内充电设备上的二维码进入
				</view>

			</view>
			<view class="fdbfour">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n2.png"></image>
			</view>
		</view>
		<view class="footdibu1" v-show="typetwo">
			<view class="fdbone"></view>
			<view class="fdbfive">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n8.png"></image>
			</view>
			<view class="fdbtwo">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n1.png"></image>
			</view>
			<view class="fdbthree">
				<view class="fdbthreeshang">绑定电卡</view>


			</view>
			<view class="fdbfour">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n2.png"></image>
			</view>
		</view>
		<view class="footdibu2" v-show="typethree">
			<view class="fdbone"></view>
			<view class="fdbfive">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n8.png"></image>
			</view>
			<view class="fdbtwo">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n10.png"></image>
			</view>
			<view class="fdbthree">
				<view class="fdbthreeshang">查看更多</view>
			</view>
			<view class="fdbfour">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//n2.png"></image>
			</view>
		</view>
		<van-popup :show="gzshow" @close="gzshow=false">
			<view class="gztan">
				<view class="gztanimg">
					<img :src="wechaturl"></img>
					<!-- <img src='https://qiniu.jxyutuo.com/yanqin/tabBarimg//00000006.jpg'></img> -->
				</view>
				<view class="gztantxt">
					长按识别二维码，关注公众号，接收充电消息通知
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import {
		Config
	} from '../../common/Config.js'
	import AnNoticeBar from '../../components/an-notice-bar/an-notice-bar.vue'
	import tou_hand from '../../components/tou_hand/tou_hand.vue'
	export default {
		components: {
			tabBar,
			AnNoticeBar,
			tou_hand,
		},
		mounted() {
			//document.querySelector('body').setAttribute('style', 'background-color:#2A3034')
		},
		data() {
			return {
				noticeMsg: "",
				showtype: 1, //首页样式
				phoneshow: false,
				poster_list: [], //轮播图数组
				typeone: false,
				typetwo: false,
				typethree: false,
				projectPhone: '', //小区电话
				gzshow: false,
				wechatLogo: false, //是否显示公众号二维码
				wechaturl: '', //是否显示公众号二维码
				userlist: {}, //用户信息
				tipbindshow: false, //提示绑定开关
			}
		},


		onLoad(option) {
			this.lbbtn()
		},
		onShow() {
			if(uni.hideHomeButton){
				uni.hideHomeButton();
			}
			//this.getPosterList();
			this.wechaturl = uni.getStorageSync('wechat_view').qrcode;
			this.usertap();
		},
		methods: {
			usertap() {
				this.$base.request('user/userInfo', 'GET')
					.then(res => {
						if (res.data.code == 200) {
							console.log(res.data.data);
							this.userlist = res.data.data
							uni.setStorageSync('userId', this.userlist.id)
							this.userlist.id = this.pad(this.userlist.id, 8)
							this.projectPhone = this.userlist.projectPhone
							uni.setStorageSync('user', this.userlist)
							uni.setStorageSync('phone', this.userlist.phone)
							uni.setStorageSync('Name', this.userlist.realName)
							if (res.data.data.subscribe == 0) {
								// uni.redirectTo({
								// 	url: '/pages/qr_code/qr_code'
								// })
								// return
								this.wechatLogo = true;
							}
							if (res.data.data.projectId == 0) {
								//this.tipbindshow = true;
								return
							}
						}
					})
					.catch(err => {

					})
			},
			pad(num, n) {
				var len = num.toString().length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				return num;
			},
			zhcz() {
				uni.navigateTo({
					url: '../account_recharge/account_recharge'
				})
			},
			kbtngo() {
				uni.navigateTo({
					url: '../personal_data/personal_data?zt=' + 1
				})
			},
			kbtngo1() {
				this.phoneshow = false
			},
			gouser() {
				uni.redirectTo({
					url: '../personal_data/personal_data?ktype=' + 1 + '&zt=' + 1
				});
			},
			lbbtn() {
				let data = {
					pageNum: 1,
					pageSize: 5
				}

				this.$base.request('notice/list', 'GET', data)
					.then(res => {
						if (res.data.code == 0) {
							var arr = []
							var list = res.data.rows
							for (var i = 0; i < list.length; i++) {
								arr.push(list[i].title)
							}
							this.noticeMsg = arr.join("|")
						}

					})
					.catch(err => {

					})
			},
			gogd(url, jump, msg, libId, teamId) {
				if (jump == 'PU' || jump == 'SA') {
					if (url != 0) {
						let point = 'personal'
						this.ggadd(libId, teamId, point)
						window.location.href = url
					}
				} else if (jump == 'PA') {
					let point = 'personal'
					this.ggadd(libId, teamId, point)
					uni.navigateTo({
						url: '../ad_details/ad_details?msg=' + msg
					});
				}
			},
			ggadd(libId, teamId, point) {
				let data = {
					systemId: 0,
					libId: libId,
					teamId: teamId,
					point: point,
					appid: uni.getStorageSync('user').appid,
					projectId: uni.getStorageSync('user').projectId
				}
				this.$base.request('posterClickMsg/add', 'POST', data)
					.then(res => {

					})
					.catch(err => {

					})
			},
			gzbtn() {
				this.gzshow = true
			},
			getPosterList() {
				let _this = this;
				let data = {
					point: 'personal'
				}
				_this.$base.request('poster/getPosterList', 'GET', data)
					.then(res => {
						if (res.data.code == 200) {
							var list = res.data.data
							console.log(list);
							_this.poster_list = list;
							
						} else {
							//_this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {
			
					})
			},
			tiaozhuan(url) {
				window.location.href = url;
			},
			
			//返回首页
			toSmcharging(){
				uni.reLaunch({
					url:'/pages/smcharging/smcharging'
				})
			},
			//跳转个人资料
			toPersonalData(){
				console.log(111);
				uni.navigateTo({
					url: '/pages/personal_data/personal_data'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color:#2A3034
	}
	.main {
		text-size-adjust: 100% !important;
		-webkit-text-size-adjust: 100% !important;
		-moz-text-size-adjust: 100% !important;
		width: 100%;
		overflow-x: hidden;
		background-color: #2A3034;
		
		.ddtap {
			width: 100%;
			height: 251upx;
			margin: 0 auto;
		
			image {
				width: 100%;
				height: 251upx;
			}
		
			video {
				width: 100%;
				height: 251upx;
			}
		}

		.foothand {
			position: absolute;
			z-index: 9;
			top: 0upx;
			left: 5%;
			width: 90%;
			background: linear-gradient(180deg, #8BC21C 0%, #A8D628 100%);
			border-radius: 24upx;
			padding: 10upx 24upx;
			box-sizing: border-box;
			margin-top: 30upx;
			color: #fff;
		}

		.hand {
			width: 100%;
			height: 400upx;
			text-size-adjust: 100% !important;
			-webkit-text-size-adjust: 100% !important;
			-moz-text-size-adjust: 100% !important;
			background: url('https://qiniu.jxyutuo.com/yanqin/tabBarimg//indexhand.png') no-repeat;
			// background-color: blue;
			// border-radius: 0 0 5% 5%;
			// background-image: linear-gradient(to right, #5260Ef , #428DE9);
			background-size: cover;
			box-sizing: border-box;
			padding-top: 100upx;
			padding-left: 33upx;
			position: relative;


			.handnei {
				width: 100%;
				display: flex;

				.hleft {
					width: 161upx;
					height: 161upx;
					border-radius: 50%;
					padding: 5upx;
					background-color: #FFFFFF;

					image {
						width: 161upx;
						height: 161upx;
						border-radius: 50%;
					}
				}

				.hright {
					height: 161upx;
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					// text-align: left;
					color: #ffffff;
					margin-left: 22upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;

					view {
						// margin-bottom: 13upx;
						width: 500upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.hshow {
				width: 686upx;
				// height: 113upx;
				padding: 30upx 0;
				border-radius: 8upx;
				background-color: rgba(58, 64, 68, 1);
				bottom: -60upx;
				// top: 304upx;
				// box-shadow: 0px 0px 5upx 2.5upx rgba(106, 106, 106, 0.9);
				position: absolute;
				display: flex;


				.hsleft {
					width: 50%;
					text-align: center;
					box-sizing: border-box;

					.hsone {
						font-size: 36upx;
						font-family: Arial Bold, Arial Bold-Bold;
						font-weight: 700;
						color: #fff;
					}

					.hstwo {
						font-size: 26upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #D0D0D0;
					}

					.hsleftk {
						border-left: 1upx solid #c3defa;
					}
				}
			}

			.black {
				width: 22upx;
				height: 39upx;
				position: absolute;
				top: 29upx;
				left: 34upx;
				box-sizing: border-box;

				image {
					width: 22upx;
					height: 39upx;
				}

			}
		}

		.gztan {
			width: 650upx;
			background-color: #FFFFFF;
			text-align: center;
			padding: 70upx 0;

			.gztanimg {
				width: 350upx;
				height: 350upx;
				margin: 0 auto;

				img {
					width: 350upx;
					height: 350upx;
				}
			}

			.gztantxt {
				margin-top: 30upx;
				font-size: 20upx;
			}
		}

		.show {
			padding-top: 65upx;
			background-color: #2A3034;
			margin-bottom: 200upx;

			/deep/.van-popup {
				padding: 30upx;
				border-radius: 16upx;
			}

			.tishi {
				.tstou {
					color: #333333;
					font-size: 32upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
				}

				.tsnei {
					font-size: 28upx;
					padding: 30upx;
					color: #555555;
				}

				.kbtn {
					width: 570upx;
					height: 75upx;
					background: #4b98ed;
					font-size: 30upx;
					border-radius: 16upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					text-align: center;
					line-height: 75upx;
					margin: 0 auto;
					margin-top: 40upx;
					color: #ffffff;
				}
			}

			.tap {
				width: 686upx;
				height: 240upx;
				border-radius: 16upx;
				margin: 20upx auto;
				padding-bottom: 20upx;

				image {
					width: 686upx;
					height: 240upx;
					border-radius: 16upx;
				}
			}

			.tap1 {
				width: 686upx;
				height: 240upx;
				border-radius: 16upx;
				margin: 20upx auto;
				padding-bottom: 20upx;

				image {
					width: 686upx;
					height: 240upx;
					border-radius: 16upx;
				}
			}

			.lun {
				width: 85%;
				box-sizing: border-box;
				border-radius: 10upx;
				margin: 0 auto;
				// padding-bottom: 21upx;
			}

			.kf {
				width: 85%;
				box-sizing: border-box;
				margin: 5upx auto;
				display: flex;
				background-color: #4A4E52;
				background-size: cover;
				padding: 12upx 40upx;
				font-size: 15px;
				font-family: Arial Bold, Arial Bold-Bold;
				color: #FFFFFF;
				align-items: center;

				// margin-top: 15upx;
				image {
					width: 29upx;
					height: 37upx;
				}
			}

			.mont {
				width: 100%;
				box-sizing: border-box;
				background-color: #2A3034;
				color: #fff;

				.mone {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 29upx 36upx;

					image {
						width: 12upx;
						height: 20upx;
					}

					.moneleft {
						font-size: 30upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						align-items: center;

						image {
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
						}
					}
				}


			}
		}

		.footdibu {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			// background-color: rgba(0,0,0,.7);
			.fdbfive {
				position: absolute;
				top: 30upx;
				right: 30upx;
				width: 94upx;
				height: 46upx;

				image {
					width: 94upx;
					height: 46upx;
				}
			}

			.fdbone {
				position: absolute;
				width: 160upx;
				height: 160upx;
				top: 528upx;
				left: 20upx;
				border-radius: 50%;
				box-shadow: rgba(0, 0, 0, .6) 0 0 0 100vh;
			}

			.fdbtwo {
				position: absolute;
				width: 126upx;
				height: 132upx;
				top: 670upx;
				left: 258upx;

				image {
					width: 126upx;
					height: 132upx;
				}
			}

			.fdbthree {
				position: absolute;
				width: 450upx;
				top: 850upx;
				text-align: center;
				left: 142upx;
				color: #FFFFFF;

				.fdbthreeshang {
					font-size: 37upx;
					font-family: YouYuan;
					font-weight: 400;
				}

				.fdbthreezhong {
					margin-top: 38upx;
					font-size: 21upx;
					font-family: YouYuan;
					font-weight: 400;
				}

			}

			.fdbfour {
				position: absolute;
				top: 1068upx;
				left: 272upx;
				width: 198upx;
				height: 76upx;

				image {
					width: 198upx;
					height: 76upx;
				}
			}

		}

		.footdibu1 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			// background-color: rgba(0,0,0,.7);
			.fdbfive {
				position: absolute;
				top: 30upx;
				right: 30upx;
				width: 94upx;
				height: 46upx;

				image {
					width: 94upx;
					height: 46upx;
				}
			}

			.fdbone {
				position: absolute;
				width: 160upx;
				height: 160upx;
				top: 528upx;
				left: 193upx;
				border-radius: 50%;
				box-shadow: rgba(0, 0, 0, .6) 0 0 0 100vh;
			}

			.fdbtwo {
				position: absolute;
				width: 126upx;
				height: 132upx;
				top: 710upx;
				left: 300upx;

				image {
					width: 126upx;
					height: 132upx;
				}
			}

			.fdbthree {
				position: absolute;
				width: 450upx;
				top: 850upx;
				text-align: center;
				left: 142upx;
				color: #FFFFFF;

				.fdbthreeshang {
					font-size: 37upx;
					font-family: YouYuan;
					font-weight: 400;
				}

				.fdbthreezhong {
					margin-top: 38upx;
					font-size: 21upx;
					font-family: YouYuan;
					font-weight: 400;
				}

			}

			.fdbfour {
				position: absolute;
				top: 1008upx;
				left: 272upx;
				width: 198upx;
				height: 76upx;

				image {
					width: 198upx;
					height: 76upx;
				}
			}

		}

		.footdibu2 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			// background-color: rgba(0,0,0,.7);
			.fdbfive {
				position: absolute;
				top: 30upx;
				right: 30upx;
				width: 94upx;
				height: 46upx;

				image {
					width: 94upx;
					height: 46upx;
				}
			}

			.fdbone {
				position: absolute;
				width: 160upx;
				height: 160upx;
				top: 692upx;
				right: 19upx;
				border-radius: 50%;
				box-shadow: rgba(0, 0, 0, .6) 0 0 0 100vh;
			}

			.fdbtwo {
				position: absolute;
				width: 170upx;
				height: 168upx;
				top: 810upx;
				left: 370upx;

				image {
					width: 170upx;
					height: 168upx;
				}
			}

			.fdbthree {
				position: absolute;
				width: 450upx;
				top: 1000upx;
				text-align: center;
				left: 142upx;
				color: #FFFFFF;

				.fdbthreeshang {
					font-size: 37upx;
					font-family: YouYuan;
					font-weight: 400;
				}

				.fdbthreezhong {
					margin-top: 38upx;
					font-size: 21upx;
					font-family: YouYuan;
					font-weight: 400;
				}

			}

			.fdbfour {
				position: absolute;
				top: 1080upx;
				left: 268upx;
				width: 198upx;
				height: 76upx;

				image {
					width: 198upx;
					height: 76upx;
				}
			}

		}

		/deep/.van-popup--center {
			border-radius: 20upx;
		}

		.tan {
			width: 600upx;
			padding: 100upx 0;

			.xz {
				text-align: center;
				padding: 0 30upx;

				image {
					width: 300upx;
					height: 289upx;
				}

				.xzone {
					margin-top: 28upx;
					font-weight: bold;
					color: #000000;
					margin-bottom: 80upx;
					font-size: 38upx;

				}

				.xztwo {
					margin-top: 15upx;
					font-weight: 600;
					color: #4587e8;
					font-size: 30upx;
				}

				.xzthree {
					margin-top: 30upx;
					font-weight: 600;
					color: #4e4e4e;
					font-size: 20upx;
					margin-bottom: 40upx;
				}
			}

			.anniu {
				display: flex;
				justify-content: space-between;
				padding: 0 90upx;
				font-weight: 600;
				font-size: 28upx;
				color: #333333;

				.anniu1 {
					width: 130upx;
					height: 55upx;
					line-height: 55upx;
					border-radius: 40upx;
					text-align: center;
					border: #333333 2upx solid;
				}
			}
		}
	}
</style>